<template>
  <div class="progress-list table-theme">
    <head-title title="合作--商家进度状态"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right add">
        <refresh-button @refresh="refreshPage"></refresh-button>
          <el-button type="primary" @click="showDialog(1)">增加进度</el-button>
        </div>
      </div>
      <p style="text-align: right; line-height: 30px">
        总进度条数：{{ total }}
      </p>
      <el-table :data="list">
        <el-table-column
          label="序号"
          align="center"
          prop="progress_id"
          width="50"
        ></el-table-column>
        <el-table-column
          label="店铺ID"
          align="center"
          prop="store_id"
        ></el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="showDialog(2, scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" @click="del(scope.row.progress_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="dialog"
      width="500px"
      center
      :modal-append-to-body="false"
      @close="hideDialog"
    >
      <div class="info">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="备注" prop="name">
            <el-input type="textarea" :rows="2" v-model="ruleForm.name" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      store_id: "",
      dialog: false,
      title: "增加进度",
      type: "add",
      total: 0,
      progress_id:'',
      list: [],
      ruleForm: {
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入备注" }],
      },
    };
  },
  methods: {
    init(e) {
      let data = {
        store_id: this.store_id
      };
      this.$http(this.$ApiList.StoreProgressList, data).then((res) => {
        this.list = res.datas.data;
        this.total = res.datas.count;
      });
    },
    showDialog(type,row) {
      this.type = type == 1 ? "add" : "edit";
      this.title = type == 1 ? "增加进度" : "编辑进度";
      if(type == 2){
          this.progress_id = row.progress_id;
          this.ruleForm.name = row.name;
      }else{

      }
      this.dialog = true;
    },
    hideDialog() {
      this.dialog = false;
      this.ruleForm.name = "";
      this.$refs['ruleForm'].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            ...this.ruleForm
          };
          if (this.type === "add") {
              data.store_id = this.store_id
            this.$http(this.$ApiList.AddStoreProgress, data).then((res) => {
              this.$refs[formName].resetFields();
              this.dialog = false;
              this.$message.success('增加成功')
              this.init();
            });
          }else{
              data.progress_id = this.progress_id;
              this.$http(this.$ApiList.UpdateStoreProgress,data).then(res=>{
                  this.$refs[formName].resetFields();
                this.dialog = false;
                this.$message.success('编辑成功');
                this.init();
              })
          }
        }
      });
    },
    refreshPage(){
        this.dialog = false;
        this.init();
    },
    del(progress_id){
        this.$confirm('此操作将永久删除此进度内容，是否继续？','操作',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }).then(()=>{
            this.$http(this.$ApiList.DelStoreProgress,{progress_id}).then(res=>{
                this.$message.success(res.datas);
                this.init();
            })
        })
    }
  },
  created() {
    this.store_id = this.$route.query.store_id;
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.progress-list{
   
}
</style>